<script setup>
import { ref, onMounted } from 'vue'
import { getSimpleArticlesByTagIdAPI, updateTagNameByIdAPI, deleteTagByIdAPI, getTagListAPI } from '../../../apis/apis';

// 是否暂时抽屉
const drawer = ref(false)
// 抽屉展示的文章列表
const simpleArticleList = ref([])
// 标签数据
const tableData = ref([])
// 当前页
const current = ref(1)
// 总条数
const total = ref(1)
// 每页显示条数
const pageSize = ref(10)

// 当前页改变
const changePage = async (num) => {
  const params = {
    current: num,
    pageSize: pageSize.value
  }
  const res = await getTagListAPI(params)
  tableData.value = res.data.pageList
}
// 每页显示条数改变
const handleSizeChange = (num) => {
  pageSize.value = num
  getTags()
}
// 修改分类编辑按钮
const edit = (row) => {
  ElMessageBox.prompt('', '修改标签名称', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPlaceholder: row.name,
    callback: async (action) => {
      if (action.action === "confirm") {
        if (action.value === row.name) {
          ElMessage({
            type: 'warning',
            message: '请勿重复输入',
          })
          return
        }
        const res = await updateTagNameByIdAPI(row.id, action.value)
        if (res.code === 1) {
          // 修改分类名称
          ElMessage({
            type: 'success', duration: 1000,
            message: '修改成功',
          })
          getTags()
        } else {
          ElMessage({
            type: 'info', duration: 1000,
            message: '修改失败',
          })
        }
      } else {
        ElMessage({
          type: 'info', duration: 1000,
          message: '取消修改',
        })
      }
    }
  })
}
// 点击详情按钮
const detail = async (row) => {
  drawer.value = true
  // 请求该分类下的文章
  const res = await getSimpleArticlesByTagIdAPI(row.id)
}
// 删除标签按钮
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除标签: ' + row.name, 'Warning', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    callback: async (action) => {
      if (action === "confirm") {
        const res = await deleteTagByIdAPI(row.id)
        if (res.code === 1) {
          // 修改标签名称
          ElMessage({
            type: 'success',
            duration: 1000,
            message: '删除成功',
          })
          getTags()
        } else {
          ElMessage({
            type: 'info',
            duration: 1000,
            message: '删除失败',
          })
        }
      } else {
        ElMessage({
          type: 'info',
          duration: 1000,
          message: '取消删除',
        })
      }
    }
  })
}
// 请求标签列表
const getTags = async () => {
  const params = {
    current: current.value,
    pageSize: pageSize.value
  }
  const res = await getTagListAPI(params)
  total.value = res.data.total
  tableData.value = res.data.pageList
}

onMounted(() => {
  getTags()
})
</script>

<template>
  <div class="px-8 py-8 flex flex-col">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      stripe
      default-expand-all
    >

      <el-table-column
        prop="createTime"
        label="创建日期"
        sortable
      />
      <el-table-column
        prop="name"
        label="名称"
        sortable
      />
      <el-table-column
        prop="count"
        label="使用次数"
        sortable
      />


      <el-table-column
        fixed="right"
        label="Operations"
        width="180"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="detail(scope.row)"
          >详情</el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="edit(scope.row)"
          >编辑</el-button>
          <el-button
            link
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            <div class="text-sm">
              删除
            </div>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bg-white mt-4 py-2 flex items-center justify-center">
      <el-pagination
        class=""
        popper-class="w-fit"
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30,]"
        layout="sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="changePage"
      />
    </div>
  </div>

  <el-drawer
    v-model="drawer"
    :show-close="true"
    :with-header="false"
    show-close
    size="40%"
  >
    <span class="flex items-center justify-between text-xl">
      <div>
        关联列表 ({{ simpleArticleList.length }} 篇):
      </div>
    </span>
    <el-timeline style="max-width: 600px">
      <div class="px-3 pt-5">
        <el-timeline-item
          v-for="(simpleArticle, index) in simpleArticleList"
          :key="index"
        >
          <RouterLink
            :to="{ path: '/edit', query: { type: 'preview', id: simpleArticle.id } }"
            class="flex items-center justify-between  cursor-pointer border-b border-collapse hover:border-red-400"
          >
            <div class="font-medium text-gray-700 tracking-wide text-xl">
              {{ simpleArticle.title }}

            </div>
            <div class="font-sm text-gray-600 tracking-wide text-sm pr-2">
              {{ simpleArticle.count }} 字
            </div>
          </RouterLink>

        </el-timeline-item>
      </div>
    </el-timeline>
  </el-drawer>


</template>

<style
  scoped
  lang='scss'
></style>